<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/ac28c333645667553b74545c46ba5e7b.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/a1e7ea79a6221552eb0e00e5552bc74f.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/8a3c2501b08ae5739f7717d6de683f5f.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/3f154127d71accf042254fe1d47b9a86.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/a7b08e3aed13787da15c58879963be01.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/68f443a9bcc78b0c46a414a633f66c47.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/cfa93449e6deef735fc746c7aa39b96f.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
      <div class="swiper-slide"><img
        src="https://yanxuan.nosdn.127.net/931e7f847284a387d4725c9409383814.jpg?imageView&quality=75&thumbnail=750x0"
        alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  
  export default {
    name: 'swiper',
    mounted () {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            type: 'custom',
            renderCustom: function (swiper, current, total) {
              const activeColor = '#fff'
              const normalColor = '#eee'
              let color = ''
              let paginationStyle = ''
              let html = ''
              for (let i = 1; i <= total; i++) {
                if (i === current) {
                  color = activeColor
                } else {
                  color = normalColor
                }
                paginationStyle =
                  `background:${color};opacity:1;display:inline-block;width:20px;height:2px;margin-right:0.2rem;`
                html += `<span class="swiper-pagination-custom" style=${paginationStyle}></span>`
              }
              return html
            }
          }
        })
      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .swiper-container
    height 370px
    .swiper-wrapper
      .swiper-slide
        img
          width 100%
    .swiper-pagination
      margin-bottom 20px
</style>
